<template>
  <div class="rating_page">
    <head-top :goBack=true :head-title="profiletitle"></head-top>
    <section class="wrapper">
      <section class="profile-number">
       <!--<span>{{userInfo}}</span>-->
        <router-link :to="userInfo&&userInfo.user_id ? '/profile/info':'/login'" class="profile-link">
          <img :src="imgBaseUrl" class="privateImage" v-if="userInfo&&userInfo.user_id" alt="">
          <span class="privateImage" v-else>
            <svg class="privateImage-svg">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
            </svg>
          </span>
          <div class="user-info">
            <p>{{username}}</p>
            <p>
                            <span class="user-icon">
                                <svg class="icon-mobile" fill="#fff">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mobile"></use>
                                </svg>
                            </span>
              <span class="icon-mobile-number">{{mobile}}</span>
            </p>
          </div>
          <span class="arrow">
                        <svg class="arrow-svg" fill="#fff">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </span>
        </router-link>
      </section>
      <section class="info-data">
        <ul class="clear">
          <router-link to="/balance" tag="li" class="info-data-link">
            <span class="info-data-top">
              <b>{{parseInt(balance).toFixed(2)}}元</b>
            </span>
              <span class="info-data-bottom">我的余额</span>
          </router-link>
          <router-link to="/benefit" tag="li" class="info-data-link">
            <span class="info-data-top"><b>{{count}}</b>个</span>
            <span class="info-data-bottom">我的优惠</span>
          </router-link>
          <router-link to="/points" tag="li" class="info-data-link">
            <span class="info-data-top"><b>{{pointNumber}}</b>分</span>
            <span class="info-data-bottom">我的积分</span>
          </router-link>
        </ul>
      </section>
      <section class="profile-1reTe">
        <!-- 我的订单 -->
        <router-link to="/order" class="myorder">
          <aside>
            <yd-icon name="order" size=".7rem" color="#16AA6B"></yd-icon>
          </aside>
          <div class="myorder-div">
            <span>我的订单</span>
            <span class="myorder-divsvg">
              <svg fill="#bbb">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                            </svg>
            </span>
          </div>
        </router-link>
        <!-- 积分商城 -->
        <a href="#" class="myorder">
          <aside>
            <svg fill="#fc7b53">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#point"></use>
            </svg>
          </aside>
          <div class="myorder-div">
            <span>积分商城</span>
            <span class="myorder-divsvg">
                            <svg fill="#bbb">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                            </svg>
                        </span>
          </div>
        </a>
        <!-- 饿了么会员卡 -->
        <router-link to='/vipcard' class="myorder">
          <aside>
            <svg fill="#ffc636">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#vip"></use>
            </svg>
          </aside>
          <div class="myorder-div">
            <span>饿了么会员卡</span>
            <span class="myorder-divsvg">
                            <svg fill="#bbb">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                            </svg>
                        </span>
          </div>
        </router-link>
      </section>
      <section class="profile-1reTe">
        <!-- 服务中心 -->
        <router-link to='/profile/service' class="myorder">
          <aside>
            <yd-icon name="question" size=".7rem" color="#16AA6B"></yd-icon>
          </aside>
          <div class="myorder-div">
            <span>服务中心</span>
            <span class="myorder-divsvg">
                            <svg fill="#bbb">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                            </svg>
                        </span>
          </div>
        </router-link>
        <!-- 下载饿了么APP -->
        <router-link to='/download' class="myorder">
          <aside>
            <svg fill="#3cabff">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use>
            </svg>
          </aside>
          <div class="myorder-div" style="border-bottom:0;">
            <span>下载饿了么APP</span>
            <span class="myorder-divsvg">
                            <svg fill="#bbb">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                            </svg>
                        </span>
          </div>
        </router-link>
      </section>
      <foot-guide></foot-guide>
    </section>

    <router-view></router-view>
 </div>
</template>

<script type="text/ecmascript-6">
  import headTop from 'components/header/head'
  import footGuide from 'components/footer/footGuide'
  import {mapGetters , mapActions} from 'vuex'
  export default {
    data(){
      return{
        profiletitle:'我的',
        username: '登录/注册',
        mobile: '暂无绑定手机号',
        balance: 0,            //我的余额
        count : 0,             //优惠券个数
        pointNumber : 0,       //积分数
        avatar: '',             //头像地址
        imgBaseUrl:'http://img1.imgtn.bdimg.com/it/u=1762973822,121126736&fm=214&gp=0.jpg'
      }
    },
    computed: {
       ...mapGetters ([
         'userInfo'
       ])
    },
    mounted(){
      this.initData();
    },
    methods:{
      initData(){
        if(this.userInfo && this.userInfo.user_id){
          this.username = this.userInfo.username;
          this.avatar = this.userInfo.avatar;
          this.mobile = this.userInfo.mobile || '暂无绑定手机号';
          this.balance = this.userInfo.balance;
          this.count = this.userInfo.gift_amount;
          this.pointNumber = this.userInfo.point;
        }else{
          this.username = '登录/注册';
        }
      }
    },
    components:{
      headTop,
      footGuide
    }/*,
    watch:{
      userInfo: function (newV) {
        this.initData()
      }
    }*/
  }
</script>
<style scoped lang="scss">
  @import '../../style/mixin';
  .profile_page{
    padding-bottom: 1.95rem;
    p, span{
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .profile-number{
    .profile-link{
      display:block;
      display:flex;
      box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background:$blue;
      padding: .666667rem .6rem;
      .privateImage{
        display:inline-block;
        @include wh(2.5rem,2.5rem);
        border-radius:50%;
        vertical-align:middle;
        .privateImage-svg{
          background:$fc;
          border-radius:50%;
          @include wh(2.5rem,2.5rem);
        }
      }
      .user-info{
        margin-left:.48rem;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        p{
          font-weight:700;
          @include sc(.8rem,$fc);
          .user-icon{
            @include wh(0.5rem,0.75rem);
            display:inline-block;
            vertical-align:middle;
            line-height:0.75rem;
            .icon-mobile{
              @include wh(100%,100%);
            }
          }
          .icon-mobile-number{
            display:inline-block;
            @include sc(.57333rem,$fc);

          }
        }

      }
      .arrow{
        @include wh(.46667rem,.98rem);
        display:inline-block;
        svg{
          @include wh(100%,100%);
        }
      }
    }
  }
  .info-data{
    width:100%;
    background:$fc;
    box-sizing: border-box;
    ul{
      .info-data-link{
        float:left;
        width:33.33%;
        display:inline-block;
        border-right:1px solid #f1f1f1;
        span{
          display:block;
          width:100%;
          text-align:center;
        }
        .info-data-top{
          @include sc(.55rem,#333);
          padding: .853333rem 0 .453333rem;
          b{
            display:inline-block;
            @include sc(1.2rem,#f90);
            font-weight:700;
            line-height:1rem;
            font-family: Helvetica Neue,Tahoma;
          }
        }
        .info-data-bottom{
          @include sc(.57333rem,#666);
          font-weight:400;
          padding-bottom:.453333rem;

        }
      }
      .info-data-link:nth-of-type(2){
        .info-data-top{
          b{
            color:#ff5f3e;
          }
        }

      }
      .info-data-link:nth-of-type(3){
        border:0;
        .info-data-top{
          b{
            color:#6ac20b;
          }
        }
      }
    }
  }
  .profile-1reTe{
    margin-top:.4rem;
    background:$fc;
    .myorder{
      padding-left:1.6rem;
      display:flex;
      align-items: center;
      aside{
        @include wh(.7rem,.7rem);
        margin-left:-.866667rem;
        margin-right:.266667rem;
        display:flex;
        align-items: center;
        svg{
          @include wh(100%,100%);
        }
      }
      .myorder-div{
        width:100%;
        border-bottom:1px solid #f1f1f1;
        padding:.433333rem .266667rem .433333rem 0;
        @include sc(.7rem,#333);
        display:flex;
        justify-content:space-between;
        span{
          display:block;
        }
        .myorder-divsvg{
          @include wh(.46667rem,.466667rem);
          svg{
            @include wh(100%,100%);
          }
        }
      }
    }
    .myorder:nth-of-type(3) .myorder-div{
      border:0;
    }
  }
</style>
